<template>
	<view>
		<view class="productdetails">
			<view class="head">
				<img src="/static/takeaway.png">
			</view>
			<!-- 1 -->
			<view class="middle">
				<view class="middle-text">
					<text>拿铁奶茶</text>
					<view class="middle-sales">
						<text>已销2390</text>
					</view>
					<view class="middle-money">
						<view class="money">
							<text>￥{{29}}.00</text>
						</view>
						<uni-number-box
						v-model="num" 
						@blur="blur" 
						@focus="focus" 
						@change="changeValue" />
					</view>
				</view>
			</view>
			<!-- 2 -->
			<view class="details">
				<view class="details-roll">
					<view class="order-title" @click="selects">
						<text>点餐</text>
					</view>
					<view class="order-shop" @click="selectsshops">
						<text>推荐</text>
					</view>
					<view class="order-border">
					</view>
					<view  
					:class="selectsId === 0 ? 
					'order-underline' : 
					'order-underline-shope'">
					</view>
				</view>
				<view class="describe">
				</view>
				<view class="details-commodity">
					<text>商品描述</text>
					<view class="details-commodity-title">
						<text>1223231546546546465416</text>
					</view>
				</view>
				<view class="details-material">
					<text>原料</text>
					<view class="details-commodity-title">
						<text>1223231546546546465416</text>
					</view>
				</view>
				<view class="details-material">
					<text>分量</text>
					<view class="details-commodity-title">
						<text>1223231546546546465416</text>
					</view>
				</view>
				<view class="details-material">
					<text>温度</text>
					<view class="details-commodity-title">
						<text>1223231546546546465416</text>
					</view>
				</view>
				<view class="details-material">
					<text>茶底</text>
					<view class="details-commodity-title">
						<text>1223231546546546465416</text>
					</view>
				</view>
				<view class="details-commodity">
					<text>温馨提示</text>
					<view class="details-commodity-title">
						<text>1223231546546546465416</text>
					</view>
				</view>
			</view>
			<!-- 3 -->
			<view class="recommend">
				<view class="recommend-title">
					<text>推荐</text>
				</view>
				<view 
				class="recommend-type">
					<view 
					class="recommend-type-roll"
					v-for="(item,index) in tapleData"
					:key="index"
					>
						<view class="recommend-type-icon">
							<!-- <img src="" > -->
						</view>
						<view class="recommend-type-title">
							<text>{{item.name}}</text>
						</view>
						<view class="recommend-type-money">
							<text>￥{{item.num}}</text>
							<view class="recommend-type-count">
								<text>+</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<!-- <shopcar :totalPrice='totalPrice' :counts='counts'></shopcar> -->
			</view>
		</view>
	</view>
	
</template>


<script>
	// import shopcar from '../../components/shopcar.vue'
	export default {
		components : {
			// shopcar
		},
		data() {
			return {
				counts:29,
				num:1,
				selectsId: 0,
				tapleData: [
					{
						id:'1',
						icon:'',
						name:'拿铁奶茶',
						num:'30:00',
					},
					{
						id:'2',
						icon:'',
						name:'拿铁奶茶',
						num:'30:00',
					}
				],
				totalPrice:1,
				price:29
			}
		},
		onShow() {
			this.counts = 0
			this.totalPrice = 1
		},
		methods: {
			// 数量变化
				changeValue(value) {
					console.log('返回数值：', value);
					console.log(this.num,this.counts);
					this.totalPrice = this.num
					this.counts = this.num*this.price
					// this.getTotalPrice()
					// this.getTotalCount()
				},
				// 求总数
				getTotalPrice() {
					// let carts = this.totalData;
					// let sum = 0
					// for(let i = 0 ; i < carts.length; i++) {
					// 	sum += carts[i].num
					// 	}
						// this.totalPrice = sum
					},
					// 总价
					getTotalCount() {
						let carts = this.totalData;
						let sum = 0
						for(let i = 0; i < carts.length; i++) {
							sum += carts[i].num*carts[i].money
						}
						this.counts = sum.toFixed(2)
					},
				selects (){
					this.selectsId = 0
				},
				selectsshops() {
					this.selectsId = 1
				},
				focus(e) {
					console.log('focus:', e);
				}
		}
	}
</script>

<style lang="scss">
	.productdetails {
		.head {
			img {
				width: 750rpx;
				height: 750rpx;
				background: #F7F7F7;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}
		}
		.middle {
			width: 690rpx;
			height: 230rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			margin: 24rpx 30rpx 20rpx;
			.middle-text {
				padding: 30rpx 0 0 20rpx;
				text {
					width: 144rpx;
					height: 36rpx;
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					line-height: 36rpx;
				}
			}
			.middle-sales {
				padding: 26rpx 0 20rpx 0;
				text {
					width: 110rpx;
					height: 26rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					line-height: 26rpx;
				}
			}
			.middle-money {
				display: flex;
				padding-bottom: 30rpx;
				.money {
					margin-right: 40rpx;
				}
				text {
					width: 20rpx;
					height: 40rpx;
					font-size: 40rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #FE5326;
					line-height: 40rpx;
				}
				.uni-numbox--text {
					width: 30rpx;
				}
				.uni-numbox__minus {
					border-radius: 50%;
				}
				
				.uni-numbox__value {
					width: 28rpx;
					background: #FFFFFF !important;
					margin:  0 12rpx;
				}
				.uni-numbox__plus {
					width: 19rpx;
					height: 48rpx;
					 background: linear-gradient(270deg, #F99529 0%, #F94D29 100%) !important;
					opacity: 1;
					border-radius: 50%;
				}
			}
		}
		.details {
			position: relative;
			margin-top: 20rpx;
			width: 750rpx;
			height: 634rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			.details-roll {
				display: flex;
				padding:36rpx 0 0 30rpx;
				.order-border {
					position: absolute;
					margin: 0 32rpx;
					top: 88rpx;
					width: 689rpx;
					height: 0rpx;
					opacity: 1;
					border: 2rpx solid #F5F5F5;
				}
				.order-underline {
					position: absolute;
					top: 85rpx;
					width: 64rpx;
					height: 6rpx;
					background: linear-gradient(270deg, #F94D29 0%, #F99529 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					opacity: 1; 
				}
				.order-underline-shope {
					position: absolute;
					top: 85rpx;
					left: 187rpx;
					width: 70rpx;
					height: 6rpx;
					background: linear-gradient(270deg, #F94D29 0%, #F99529 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					opacity: 1; 
				}
				.order-title {
					margin-right: 92rpx;
				}
			}
			.details-commodity {
				display: flex;
				margin: 40rpx 30rpx  98rpx ;
				height: 28rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				line-height: 28rpx;
				.details-commodity-title {
					margin-left: 30rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #222222;
				}
			}
			.details-material {
				display: flex;
				margin: 40rpx 30rpx  50rpx ;
				height: 28rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				line-height: 28rpx;
				.details-commodity-title {
					margin-left: 86rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #222222;
				}
			}
		}
		.recommend {
			margin-top: 30rpx;
			width: 750rpx;
			height: 634rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			.recommend-title {
				padding: 36rpx 0 0 30rpx;
				width: 64rpx;
				height: 32rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #000000;
				line-height: 32rpx;
			}
			
			.recommend-type {
				display: flex;
				.recommend-type-roll {
					margin: 24rpx 0 0 24rpx;
					width: 336rpx;
					height: 486rpx;
					background: #FFFFFF;
					border: 1rpx solid;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					opacity: 1;
				}
				.recommend-type-icon {
					width: 336rpx;
					height: 336rpx;
					background: #C6CA53;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
					opacity: 1;
				}
				.recommend-type-title {
					margin: 30rpx 0 30rpx 14rpx;
					height: 30rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					line-height: 32rpx;
				}
				.recommend-type-money {
					margin-left: 12rpx;
					display: flex;
					justify-content: space-between;
					.recommend-type-count {
						width: 40rpx;
						height: 40rpx;
						background: linear-gradient(270deg, #F99529 0%, #F94D29 100%);
						opacity: 1;
						border-radius: 50%;
						line-height: 40rpx;
						text-align: center;
						margin-right: 14rpx;
					}
				}
			}
		}
	}
</style>
